<template>
  <div class="detail">
    <header>
      <van-image
        width="100%"
        fit="cover"
        src="http://img4.imgtn.bdimg.com/it/u=2853553659,1775735885&fm=26&gp=0.jpg"
      />
      <van-icon
        name="arrow-left"
        size="20px"
        class="back"
        @click="goBack"
      />
    </header>
    <section>
      <div class="top">
        <div class="logo">
          <img
            :src="seller.avatar"
            alt=""
          >
        </div>
        <div class="txt">
          <h2 class="shop">{{seller.name}}
            <van-icon
              name="play"
              @click="showPopup"
            />
            <van-popup
              v-model="showProp"
              class="showProp"
            >
              <h2>{{seller.name}}</h2>
              <div class="det">
                <div class="grade">
                  <p class="num">{{seller.score}}</p>
                  <p class="txt">评分</p>
                </div>
                <div class="grade">
                  <p class="num">{{seller.sellCount}}单</p>
                  <p class="txt">月售</p>
                </div>
                <div class="grade">
                  <p class="num">{{seller.description}}</p>
                  <p class="txt">约{{seller.deliveryTime}}分钟</p>
                </div>
                <div class="grade">
                  <p class="num">{{seller.deliveryPrice}}元</p>
                  <p class="txt">配送费</p>
                </div>
                <div class="grade">
                  <p class="num">{{seller.distance}}km</p>
                  <p class="txt">距离</p>
                </div>
              </div>
              <van-divider>公告</van-divider>
              <p class="announce">{{seller.bulletin}}</p>
            </van-popup>
          </h2>
          <p class="msg"><span>评价{{seller.score}}</span> <span>月售{{seller.sellCount}}单</span> <span>蜂鸟专送约{{seller.deliveryTime}}分钟</span></p>
          <p class="discount">
            <span class="discount_l">
              <van-tag type="success">首单</van-tag>
              <span class="dl_con">{{txt}}</span>
            </span>
            <span class="discount_r">
              <span class="dr_l"> {{discountnum}}个优惠</span><span
                class="triangle"
                @click="eject"
              ></span>
              <van-action-sheet
                v-model="show"
                title="优惠活动"
                class="sheet"
              >
                <div class="sh_con">
                  <p
                    v-for="(support,index) in supports"
                    :key="index"
                  >
                    <van-tag
                      type="success"
                      :color="support.color"
                    >{{support.text}}</van-tag>
                    {{support.description}}
                  </p>
                </div>
              </van-action-sheet>
            </span>
          </p>
          <div class="van-ellipsis announce">公告：{{seller.bulletin}}</div>
        </div>
      </div>
      <div class="content">
        <van-tabs
          v-model="activeName"
          title-active-color="black"
          sticky
          class="tabs"
        >
          <van-tab
            title="点餐"
            name="a"
            class="a"
          >
            <h2 class="recommend">火爆推荐</h2>
            <div
              class="wrapper"
              ref="wrapper"
            >
              <div class="inner">
                <div
                  class="wrap_item"
                  v-for="(rec,index) in recmsg"
                  :key="index"
                >
                  <img
                    :src="rec.image"
                    alt=""
                  >
                  <p class="title">{{rec.name}}</p>
                  <p class="month">月售{{rec.sellCount}} 好评率{{rec.rating}}%</p>
                  <p class="price_group">
                    <span class="price">¥{{rec.price}}</span>
                    <van-icon
                      name="add"
                      color='rgb(35, 149, 255)'
                      size='30px'
                    />
                  </p>
                </div>
              </div>
            </div>
            <ClASSIFY :id='id'></ClASSIFY>
          </van-tab>
          <van-tab
            title="评价"
            name="b"
            class="b"
          >
            <EVALUATE :id="id"></EVALUATE>
          </van-tab>
          <van-tab
            title="商家"
            name="c"
            class="c"
          >
            <BUSINESS :id="id"></BUSINESS>
          </van-tab>
        </van-tabs>

      </div>
    </section>
  </div>
</template>
<script>
import BScroll from 'better-scroll'
import ClASSIFY from '@/components/CLASSIFY'
import EVALUATE from '@/components/EVALUATE'
import BUSINESS from '@/components/BUSINESS'
export default {
  data: () => ({
    id: 1,
    seller: {},
    discountnum: 0,
    supports: [],
    recommends: {},
    recmsg: [],
    txt: '',
    show: false,
    showProp: false,
    showDet: false,
    showCart: false,
    actions: [{ name: '选项' }, { name: '选项' }, { name: '选项', subname: '描述信息' }],
    activeName: 'a',
    options: {
      scrollX: {
        type: Boolean,
        default: false
      },
      click: true
    },
    activeKey: 0,
    index: 0
  }),
  created() {
    this.getSeller()
    this.getRecommennd()
    this.id = Number(this.$route.params.id)
  },
  mounted() {
    this.$nextTick(() => {
      this.scroll = new BScroll(this.$refs.wrapper, this.options)
    })
  },
  methods: {
    onSelect(item) {
      // 默认情况下，点击选项时不会自动关闭菜单
      // 可以通过 close-on-click-action 属性开启自动关闭
      this.show = false
      Toast(item.name)
    },
    eject() {
      this.show = !this.show
    },
    showPopup() {
      this.showProp = !this.showProp
    },
    show2() {
      console.log(11)
      this.showCart = !this.showCart
    },
    async getSeller() {
      const {
        data: { status, sellers }
      } = await this.$axios.get('api/getdetail/seller')
      console.log(sellers)
      sellers.forEach(item => {
        if (item.id === this.id) {
          this.seller = item.seller
        }
      })
      this.supports = this.seller.supports
      console.log(this.supports)
      this.discountnum = this.seller.supports.length
      this.txt = this.supports[0].description
      // console.log(this.seller);
      // console.log(this.supports[0].description);
    },
    async getRecommennd() {
      const {
        data: { status, recommends }
      } = await this.$axios.get('/api/getdetail/recommend')
      recommends.forEach(item => {
        if (item.id === this.id) {
          this.recommends = item
        }
      })
      this.recmsg = this.recommends.message
      // console.log(this.recommends);
      // console.log(this.recmsg);
    },
    goBack() {
      this.$router.push('/home')
    }
  },
  components: {
    ClASSIFY,
    EVALUATE,
    BUSINESS
  }
}
</script>
<style lang="less" scoped>
.detail {
  header {
    height: 100px;
    overflow: hidden;
    position: relative;
    .back {
      position: absolute;
      top: 5px;
      left: 7px;
      color: white;
    }
  }
  section {
    position: relative;
    .top {
      padding: 25px 0 0 0;
      .logo {
        width: 80px;
        height: 80px;
        position: absolute;
        top: -60px;
        left: 50%;
        transform: translateX(-40px);
        img {
          width: 100%;
          height: 100%;
        }
      }
      .txt {
        font-size: 12px;
        .shop {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 18px;
          .showProp {
            width: 300px;
            height: 300px;
            padding: 10px;
            border-radius: 5px;
            h2 {
              text-align: center;
            }
            .det {
              font-size: 12px;
              display: flex;
              justify-content: space-between;
              .grade {
                .num {
                  font-size: 14px;
                  margin: 2px 0;
                }
                .txt {
                  margin: 0;
                  color: #999;
                }
              }
            }
            .announce {
              font-size: 14px;
              text-indent: 20px;
              padding-left: 10px;
            }
          }
        }
        .msg {
          color: #666;
          padding: 0 66px;
          display: flex;
          justify-content: space-between;
        }
        .discount {
          padding: 0 25px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .discount_l {
            width: 228px;
            display: flex;
            justify-content: flex-start;
            .dl_con {
              color: #999;
              margin-left: 10px;
            }
          }
          .discount_r {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .dr_l {
              color: #999;
              margin-right: 5px;
            }
            .triangle {
              margin-top: 5px;
              display: block;
              border-top: 5px solid #999;
              border-left: 5px solid transparent;
              border-right: 5px solid transparent;
              border-bottom: 5px solid transparent;
            }
            .sheet {
              box-sizing: border-box;
              padding: 10px 20px 10px 20px;
              position: fixed;
              bottom: 50px;
              z-index: 9999;
              .sh_con {
                padding-bottom: 30px;
              }
            }
          }
        }
        .announce {
          padding: 0 22px;
          color: #999;
        }
      }
    }
    .content {
      .tabs {
        width: 98%;
        .a {
          overflow-x: hidden;
          .recommend {
            font-size: 16px;
            padding-left: 5px;
          }
          .wrapper {
            overflow-x: hidden;
            .inner {
              display: flex;
              justify-content: flex-start;
              padding: 0 5px;
              width: 1200px;
              .wrap_item {
                font-size: 12px;
                margin-right: 10px;
                width: 117px;
                img {
                  width: 100%;
                  height: 80px;
                }
                .title {
                  margin: 0;
                  font-size: 14px;
                  color: #333;
                }
                .month {
                  margin: 0;
                  color: #999;
                }
                .price_group {
                  margin: 4px 0 0 0;
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  .price {
                    color: #ff5339;
                    font-size: 16px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>